var echarts = require("echarts");
let chartLeft1 = {
    color: ['#fc8251', '#5470c6', '#75bedc', '#ef6567', '#f9c956', '#75bedc', '#91cd77'],
    tooltip: {
        trigger: 'item', //数据项图形触发
        formatter: '{b}: {c} 人 ({d}%)', // 展示格式
    },
    toolbox: {
        show: true,
        feature: {
            saveAsImage: {
                show: true,
                excludeComponents: ['toolbox'],
                pixelRatio: 2 // 控制导出图片的分辨率  
            }
        }
    },
    title: {
        // text: "出勤率占比",
        textStyle: {
            color: '#1E1E1E',
            fontSize: 18,
            fontWeight: 500,
        },
        padding: [10, 0, 0, 10], //标题位置
    },
    series: [
        {
            name: '出勤率',
            type: 'pie',
            selectedMode: 'single',
            radius: ['50%', '70%'],
            clockwise: false,
            label: {
                normal: {
                    position: 'outside',
                    formatter: '{b}\n{c} 人 ({d}%)',
                },
            },
            data: [43, 28, 30, 52, 11],
        },
    ],
    graphic: {
        elements: [
            {
                type: 'text', // 组件类型
                left: 'center', //定位
                top: '43%', // 定位
                style: {
                    // 样式
                    text: '记录总数(人)', //文字
                    fontSize: 13, //文字大小
                    textAlign: 'center', //定位
                    width: 30,
                    height: 30,
                    fill: 'darkgray', // 字体颜色
                },
            },
            {
                type: 'text',
                left: 'center',
                top: '52%',
                style: {
                    text: 164,
                    fontSize: 18,
                    textAlign: 'center',
                    width: 30,
                    height: 25,
                    fill: '#3BA5D9',
                },
            },
        ],
    },
};


let chartLeft2 = {
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "shadow"
        }
    },
    grid: {
        left: "0%",
        top: "10px",
        right: "0%",
        bottom: "4%",
        containLabel: true
    },
    xAxis: [
        {
            type: "category",
            data: [
                "07.01",
                "07.02",
                "07.03",
                "07.04",
                "07.05",
                "07.06",
            ],
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(255,255,255,.1)",
                    width: 1,
                    type: "solid"
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                interval: 0,
                // rotate:50,
                show: true,
                splitNumber: 15,
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: "12"
                }
            }
        }
    ],
    yAxis: [
        {
            type: "value",
            axisLabel: {
                show: true,
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: "12"
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(255,255,255,.1	)",
                    width: 1,
                    type: "solid"
                }
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)"
                }
            }
        },
        {
            type: "value",
            axisLabel: {
                show: true,
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: "12"
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(255,255,255,.1	)",
                    width: 1,
                    type: "solid"
                }
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)"
                }
            }
        }
    ], series: [
        {
            type: "bar",
            name: "销量",
            data: [1200, 800, 300, 500, 560, 220],
            barWidth: "25%",
            itemStyle: {
                normal: {
                    color: "#2f89cf",
                    opacity: 1,
                    barBorderRadius: 5
                }
            }
        }, {
            type: "bar",
            name: "订单",
            data: [1000, 750, 380, 450, 450, 120],
            barWidth: "25%",
            itemStyle: {
                normal: {
                    color: "#46d000",
                    opacity: 1,
                    barBorderRadius: 5
                }
            }
        }
    ]
};

let chartLeft3 = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: "0%",
        top: "-5px",
        right: "3%",
        bottom: "4%",
        containLabel: true
    },
    xAxis: {
        type: 'value',
        axisLabel: {
            show: true,
            textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: "12"
            }
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: "rgba(255,255,255,.1	)",
                width: 1,
                type: "solid"
            }
        },
        splitLine: {
            lineStyle: {
                color: "rgba(255,255,255,.1)"
            }
        }
    },
    yAxis: {
        type: 'category',
        axisLabel: {
            show: true,
            textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: "12"
            }
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: "rgba(255,255,255,.1	)",
                width: 1,
                type: "solid"
            }
        },
        splitLine: {
            lineStyle: {
                color: "rgba(255,255,255,.1)"
            }
        },
        data: ['周一', '周二', '周三', '周四', '周五']
    },
    series: [
        {
            name: '直接访问',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight'
            },
            barWidth: "55%",
            itemStyle: {
                normal: {
                    color: "#2f89cf",
                    opacity: 1,
                    barBorderRadius: 5
                }
            },
            data: [120, 302, 400, 200, 700]
        }
    ]
};

let chartRight1 = {
    title: {},
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "cross",
            label: {
                backgroundColor: "#6a7985"
            }
        }
    },

    color: ["#ffab6f", "#09b916", "#83cddc"], //图例颜色
    legend: {
        top: "0%",
        icon: "roundRect",
        data: ["白班人数", "夜班人数", "考勤异常"],
        textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12"
        }
    },
    toolbox: {
        feature: {}
    },
    grid: {
        left: "10",
        top: "20",
        right: "10",
        bottom: "10",
        containLabel: true
    },
    xAxis: [
        {
            type: "category",
            boundaryGap: false,
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: 12
                }
            },
            axisLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.2)"
                }
            },
            data: [
                "2020.06.15",
                "2020.06.16",
                "2020.06.17",
                "2020.06.18",
                "2020.06.19",
                "2020.06.20",
                "2020.06.21",
                "2020.06.22"
            ]
        }
    ],
    yAxis: [
        {
            type: "value",
            axisTick: { show: false },
            minInterval: 60,
            axisLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)"
                }
            },
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: 12
                }
            },

            splitLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)"
                }
            }
        }
    ],
    series: [
        {
            name: "白班人数",
            type: "line",
            smooth: true,
            lineStyle: {
                color: "#45d4ba",
                width: 1
            }, //线条的样式
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: "#83cddc"
                    },
                    {
                        offset: 1,
                        color: "#bfdffbb5"
                    }
                ])
            },
            data: [5, 22, 150, 54, 1, 230, 4, 1]
        },
        {
            name: "夜班人数",
            type: "line",

            smooth: true,
            lineStyle: {
                color: "#04a710",
                width: 1
            }, //
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: "#0cbf22"
                    },
                    {
                        offset: 1,
                        color: "#b8f7d1b5"
                    }
                ])
            },
            data: [10, 150, 1, 250, 20, 100, 10, 150]
        },
        {
            name: "考勤异常",
            type: "line",

            lineStyle: {
                color: "#0864c3",
                width: 1
            }, //线条的样式
            smooth: true,
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: "#29d7ff"
                    },
                    {
                        offset: 1,
                        color: "#34ccef85"
                    }
                ])
            },
            data: [100, 2, 260, 1, 200, 30, 101, 40]
        }
    ]
};


export { chartLeft1, chartLeft2, chartLeft3, chartRight1 }